<template>
  <div class="index">
    <!-- 轮播 -->
    <b-carousel :interval="3000" img-width="1024" img-height="480" fade indicators class="carousel">
      <b-carousel-slide
        v-for="(item, index) in sliders"
        :key="index"
        :caption="item.caption"
        :text="item.text"
        :img-src="item.imgSrc"
      ></b-carousel-slide>
    </b-carousel>

    <!-- 标题 -->
    <h1 class="index-title">
      Jokes Nuxt
      <b-badge class="b-badge" variant="secondary">New</b-badge>
    </h1>

    <!-- 列表 -->
    <div class="card-info">
      <b-card-group>
        <b-card v-for="(item, index) in jokes" :key="index">
          <b-card-text>{{item}}</b-card-text>
        </b-card>
      </b-card-group>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'index',
  data() {
    return {
      sliders: [
        {
          caption: 'Title1',
          text: 'subTitle1',
          imgSrc:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984473917,238095211&fm=26&gp=0.jpg',
        },
        {
          caption: 'Title2',
          text: 'subTitle2',
          imgSrc:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595507542643&di=52efb4c9f7e51b935d9ef3dee85d027c&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F52%2F52%2F01200000169026136208529565374.jpg',
        },
        {
          caption: 'Title3',
          text: 'subTitle3',
          imgSrc:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595507542643&di=388d54baa4161cbab62fa64d59254555&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F22%2F59%2F19300001325156131228593878903.jpg',
        },
      ],
      jokes: ['joke1', 'joke2', 'joke3', 'joke4', 'joke5'],
    }
  },
  async created() {
    const res = await axios.get('http://localhost:3001/data1')
    console.log(res)
  },
  methods: {
     
  }
}
</script>

<style lang='scss'>
@import '~/assets/scss/_mixin.scss';
.index {
  .carousel {
    text-shadow: 1px 1px 2px #333;
  }
  .index-title {
    @include box-h(80px);
    @include flex-center;
    & > .badge {
      margin-left: 15px;
    }
  }
  .card-info {
    @include box-w(92%);
    margin: 0 auto;
  }
}
</style>